<template>
  <div class="textdoc-form-container">
    <el-card class="form-card">
      <el-tabs v-model="mainTab" class="main-tab">
        <el-tab-pane label="配置" name="config">
          <el-tabs v-model="subTab" class="sub-tab">
            <el-tab-pane label="基本信息" name="base">
              <el-card class="group-card" shadow="never">
                <div class="group-title-abs">基础信息</div>
                <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="textdoc-form">
                  <el-form-item label="名称" prop="name" required>
                    <el-input v-model="form.name" placeholder="请输入名称" />
                  </el-form-item>
                  <el-form-item label="资源组" prop="group" required>
                    <el-select v-model="form.group" placeholder="请选择资源组">
                      <el-option label="数据服务/数据服务组-cyl" value="group1" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="版本号" prop="version">
                    <el-input v-model="form.version" placeholder="V1.0" disabled />
                  </el-form-item>
                  <el-form-item label="接口类型" prop="apiType" required>
                    <el-select v-model="form.apiType" placeholder="请选择接口类型">
                      <el-option label="REST" value="REST" />
                      <el-option label="SOAP" value="SOAP" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="请求协议" prop="protocol" required>
                    <el-select v-model="form.protocol" placeholder="请选择请求协议">
                      <el-option label="HTTP" value="HTTP" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="请求路径" prop="path" required>
                    <el-input v-model="form.path" placeholder="请输入请求路径" />
                  </el-form-item>
                  <el-form-item label="数据源类型" prop="dsType" required>
                    <el-select v-model="form.dsType" placeholder="请选择数据源类型">
                      <el-option label="文本文档" value="文本文档" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="连接" prop="conn" required>
                    <el-select v-model="form.conn" placeholder="请选择连接" :disabled="!form.dsType">
                      <el-option
                        v-for="item in connOptions"
                        :key="item"
                        :label="item"
                        :value="item"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="工作表" prop="schema" required>
                    <el-select v-model="form.schema" placeholder="请选择工作表" style="width: 100%;">
                      <el-option label="Sheet1" value="Sheet1" />
                      <el-option label="Sheet2" value="Sheet2" />
                      <el-option label="Sheet3" value="Sheet3" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="操作类型" prop="opType" required>
                    <el-select v-model="form.opType" placeholder="请选择操作类型">
                      <el-option label="查询" value="查询" />
                      <el-option label="统计数量" value="统计数量" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="描述" prop="desc">
                    <el-input
                      v-model="form.desc"
                      type="textarea"
                      :rows="2"
                      maxlength="200"
                      show-word-limit
                      placeholder="请输入描述"
                    />
                  </el-form-item>
                </el-form>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="管理属性配置" name="manage">
              <el-card class="group-card" shadow="never">
                <div class="group-title-abs">管理信息</div>
                <el-form :model="manageForm" label-width="110px" class="textdoc-form">
                  <el-form-item label="标签">
                    <el-input v-model="newTag" placeholder="标签" style="width: 120px; margin-right: 8px;" />
                    <span v-for="(tag, idx) in manageForm.tags" :key="tag" class="tag-span">{{ tag }}</span>
                  </el-form-item>
                  <el-form-item label="安全级别">
                    <el-radio-group v-model="manageForm.security">
                      <el-radio-button label="公开">公开</el-radio-button>
                      <el-radio-button label="秘密">秘密</el-radio-button>
                      <el-radio-button label="机密">机密</el-radio-button>
                      <el-radio-button label="绝密">绝密</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="项目名称" required>
                    <el-select v-model="manageForm.project" placeholder="请选择项目名称" style="width: 100%;">
                      <el-option label="公共项目" value="公共项目" />
                      <el-option label="文件服务项目" value="文件服务项目" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="系统所属部门">
                    <el-input v-model="manageForm.department" readonly disabled class="readonly-disabled-input" />
                  </el-form-item>
                  <el-form-item label="系统负责人">
                    <el-input v-model="manageForm.owner" readonly disabled class="readonly-disabled-input" />
                  </el-form-item>
                  <el-form-item label="开发商名称">
                    <el-input v-model="manageForm.developer" readonly disabled class="readonly-disabled-input" />
                  </el-form-item>
                </el-form>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="字段配置" name="fields">
          <div class="fields-topbar">
            <el-button type="primary" link icon="el-icon-refresh" class="fields-topbar-btn">重置</el-button>
            <el-button type="primary" link icon="el-icon-cpu" class="fields-topbar-btn">调试</el-button>
          </div>
          <el-card class="group-card fields-card" shadow="never">
            <el-tabs v-model="fieldsSubTab" class="fields-subtab">
              <el-tab-pane label="选择字段" name="select-fields" v-if="form.opType !== '统计数量'">
                <div class="fields-tip">选择字段（无论是否允许分页，系统限制每次查询最多返回1000条数据）</div>
                <el-table :data="fields" border class="fields-table" style="margin-bottom: 0;">
                  <el-table-column prop="name" label="字段名称" min-width="120" />
                  <el-table-column prop="type" label="类型" min-width="100" />
                  <el-table-column label="返回参数名称" min-width="140">
                    <template #default="scope">
                      <el-input v-model="scope.row.returnName" placeholder="请输入返回参数名称" size="small" />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="150">
                    <template #default="scope">
                      <el-button :icon="ArrowUp" @click="moveFieldUp(scope.$index)" link size="small" style="color: #409EFF;" class="op-btn" />
                      <el-button :icon="ArrowDown" @click="moveFieldDown(scope.$index)" link size="small" style="color: #409EFF;" class="op-btn" />
                      <el-button :icon="Delete" @click="removeField(scope.$index)" link size="small" style="color: #f56c6c;" title="删除" class="op-btn" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="条件配置" name="condition">
                <el-tabs v-model="conditionSubTab" class="condition-subtab">
                  <el-tab-pane label="过滤条件" name="filter">
                    <div class="condition-toolbar">
                      <el-button type="primary" link icon="el-icon-refresh" class="fields-topbar-btn">重置</el-button>
                      <el-button type="primary" link icon="el-icon-user" class="fields-topbar-btn">专家模式</el-button>
                      <el-button type="primary" link icon="el-icon-cpu" class="fields-topbar-btn">调试</el-button>
                    </div>
                    <el-table :data="conditions" class="condition-table">
                      <el-table-column prop="preLink" label="前连接" min-width="100">
                        <template #default="scope">
                          <el-select v-model="scope.row.preLink" placeholder="请选择" size="small" style="width: 100%;">
                            <el-option label="无" value="无" />
                            <el-option label="(" value="(" />
                            <el-option label="and" value="and" />
                            <el-option label="or" value="or" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="field" label="字段名称" min-width="120">
                        <template #default="scope">
                          <el-select v-model="scope.row.field" placeholder="请选择" size="small" style="width: 100%;" @change="updateFieldType(scope.$index)">
                            <el-option label="Sheet1.姓名" value="Sheet1.姓名" />
                            <el-option label="Sheet1.年龄" value="Sheet1.年龄" />
                            <el-option label="Sheet1.出生日期" value="Sheet1.出生日期" />
                            <el-option label="Sheet1.身高" value="Sheet1.身高" />
                            <el-option label="Sheet1.成绩" value="Sheet1.成绩" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="type" label="字段类型" min-width="100" />
                      <el-table-column prop="op" label="操作符" min-width="100">
                        <template #default="scope">
                          <el-select v-model="scope.row.op" placeholder="请选择" size="small" style="width: 100%;">
                            <el-option label="=" value="=" />
                            <el-option label=">" value=">" />
                            <el-option label=">=" value=">=" />
                            <el-option label="<" value="<" />
                            <el-option label="<=" value="<=" />
                            <el-option label="!=" value="!=" />
                            <el-option label="in" value="in" />
                            <el-option label="not in" value="not in" />
                            <el-option label="like" value="like" />
                            <el-option label="not like" value="not like" />
                            <el-option label="is null" value="is null" />
                            <el-option label="is not null" value="is not null" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="param" label="请求参数名称/常量" min-width="140">
                        <template #default="scope">
                          <el-input v-model="scope.row.param" placeholder="请输入" size="small" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="postLink" label="后连接" min-width="100">
                        <template #default="scope">
                          <el-select v-model="scope.row.postLink" placeholder="请选择" size="small" style="width: 100%;">
                            <el-option label="无" value="无" />
                            <el-option label="and" value="and" />
                            <el-option label="or" value="or" />
                            <el-option label=")and" value=")and" />
                            <el-option label=")or" value=")or" />
                            <el-option label=")" value=")" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" min-width="210">
                        <template #header>
                          <span>操作</span>
                        </template>
                        <template #default="scope">
                          <el-button :icon="Plus" @click="addCondition(scope.$index)" link size="small" title="新增一行" class="op-btn" />
                          <el-button :icon="Delete" @click="removeCondition(scope.$index)" link size="small" style="color:#f56c6c;" title="删除" class="op-btn" />
                          <el-button :icon="ArrowUp" @click="moveConditionUp(scope.$index)" link size="small" class="op-btn" />
                          <el-button :icon="ArrowDown" @click="moveConditionDown(scope.$index)" link size="small" class="op-btn" />
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="排序设置" name="sort">
                    <el-table :data="sortConditions" class="sort-table">
                      <el-table-column prop="sequence" label="序列" min-width="80">
                        <template #default="scope">
                          {{ scope.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="field" label="排序字段" min-width="150">
                        <template #default="scope">
                          <el-select v-model="scope.row.field" placeholder="请选择排序字段" size="small" style="width: 100%;">
                            <el-option label="Sheet1.姓名" value="Sheet1.姓名" />
                            <el-option label="Sheet1.年龄" value="Sheet1.年龄" />
                            <el-option label="Sheet1.出生日期" value="Sheet1.出生日期" />
                            <el-option label="Sheet1.身高" value="Sheet1.身高" />
                            <el-option label="Sheet1.成绩" value="Sheet1.成绩" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column prop="method" label="排序方式" min-width="120">
                        <template #default="scope">
                          <el-select v-model="scope.row.method" placeholder="请选择排序方式" size="small" style="width: 100%;">
                            <el-option label="ASC" value="ASC" />
                            <el-option label="DESC" value="DESC" />
                          </el-select>
                        </template>
                      </el-table-column>
                      <el-table-column label="操作" min-width="150">
                        <template #default="scope">
                          <el-button :icon="Plus" @click="addSort" link size="small" title="新增" class="op-btn" />
                          <el-button :icon="ArrowUp" @click="moveSortUp(scope.$index)" link size="small" title="上移" class="op-btn" />
                          <el-button :icon="ArrowDown" @click="moveSortDown(scope.$index)" link size="small" title="下移" class="op-btn" />
                          <el-button :icon="Delete" @click="removeSort(scope.$index)" link size="small" style="color:#f56c6c;" title="删除" class="op-btn" />
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="分页设置" name="pagination">
                    <el-form :model="paginationForm" label-width="140px" class="pagination-form">
                      <el-form-item label="是否允许分页查询">
                        <el-switch v-model="paginationForm.enablePagination" />
                      </el-form-item>
                      <el-form-item label="分页参数名称">
                        page
                      </el-form-item>
                      <el-form-item label="返回数量参数名">
                        pageSize
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>
            </el-tabs>
            <el-collapse v-model="collapseActive" class="fields-collapse" style="margin-top: 18px;">
              <el-collapse-item title="执行结果" name="result">
                <el-tabs v-model="resultTab" class="fields-result-tabs">
                  <el-tab-pane label="查询预览" name="sql">
                    <pre class="sql-preview">{{ sqlPreview }}</pre>
                  </el-tab-pane>
                  <el-tab-pane label="执行日志" name="log">
                    <div class="result-placeholder">暂无日志</div>
                  </el-tab-pane>
                  <el-tab-pane label="服务样例" name="sample">
                    <div class="result-placeholder">暂无样例</div>
                  </el-tab-pane>
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="版本" name="version">
          <div class="version-toolbar">
            <el-select v-model="versionFilter.type" placeholder="版本" style="width: 120px; margin-right: 12px;">
              <el-option label="版本" value="version" />
              <el-option label="部署人" value="deployer" />
              <el-option label="部署时间" value="deployTime" />
            </el-select>
            <template v-if="versionFilter.type === 'version'">
              <el-select v-model="versionFilter.version" placeholder="请选择版本" style="width: 180px; margin-right: 12px;">
                <el-option v-for="item in versionOptions" :key="item" :label="item" :value="item" />
              </el-select>
            </template>
            <template v-else-if="versionFilter.type === 'deployer'">
              <el-input v-model="versionFilter.deployer" placeholder="请输入部署人" style="width: 180px; margin-right: 12px;" clearable />
            </template>
            <template v-else-if="versionFilter.type === 'deployTime'">
              <el-date-picker
                v-model="versionFilter.deployTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                style="width: 220px; margin-right: 12px;"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
              />
            </template>
            <el-button type="primary" style="margin-right: 8px;">
              <el-icon style="vertical-align: middle; margin-right: 4px;"><Search /></el-icon>搜索
            </el-button>
            <el-button>
              <el-icon style="vertical-align: middle; margin-right: 4px;"><Refresh /></el-icon>重置
            </el-button>
          </div>
          <el-table :data="textdocVersionTableData" style="width: 100%; margin-top: 16px;" class="version-table">
            <el-table-column prop="name" label="名称" min-width="160" />
            <el-table-column prop="versionNumber" label="版本号" min-width="100">
              <template #default="scope">
                <el-link type="primary" :underline="false">{{ scope.row.versionNumber }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="operationalStatus" label="工作状态" min-width="100">
              <template #default="scope">
                <el-tag type="info" effect="light" size="small">{{ scope.row.operationalStatus }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="创建人" min-width="100" />
            <el-table-column prop="createTime" label="创建时间" min-width="150" />
            <el-table-column prop="deployer" label="部署人" min-width="100" />
            <el-table-column prop="deployTime" label="部署时间" min-width="150" />
            <el-table-column label="操作" min-width="120" fixed="right">
              <template #default="scope">
                <el-link type="primary" :underline="false" style="margin-right: 8px;">编辑</el-link>
                <el-link type="primary" :underline="false" style="margin-right: 8px;">另存</el-link>
                <el-link type="danger" :underline="false">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="管理" name="admin">
          <el-card class="group-card" shadow="never">
            <el-tag type="info" effect="plain" class="version-tag">V1.0</el-tag>
            <div class="admin-table">
              <div class="admin-table-row" v-for="(row, idx) in adminRows" :key="idx">
                <div class="admin-table-cell left">{{ row.leftLabel }}</div>
                <div class="admin-table-cell left-value">{{ row.leftValue }}</div>
                <div class="admin-table-cell right">{{ row.rightLabel }}</div>
                <div class="admin-table-cell right-value">{{ row.rightValue }}</div>
              </div>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="使用说明" name="help">
          <el-card class="group-card help-card" shadow="never">
            <div class="help-content-scroll">
              <div class="help-richtext" v-html="helpHtml"></div>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ArrowUp, ArrowDown, Delete, Plus, Search, Refresh } from '@element-plus/icons-vue'
const mainTab = ref('config')
const subTab = ref('base')
const form = ref({
  name: '',
  group: '',
  version: 'V1.0',
  apiType: '',
  protocol: '',
  path: '',
  dsType: '文本文档',
  conn: '',
  schema: '',
  opType: '',
  desc: ''
})
const rules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  group: [{ required: true, message: '请选择资源组', trigger: 'change' }],
  apiType: [{ required: true, message: '请选择接口类型', trigger: 'change' }],
  protocol: [{ required: true, message: '请选择请求协议', trigger: 'change' }],
  dsType: [{ required: true, message: '请选择数据源类型', trigger: 'change' }],
  conn: [{ required: true, message: '请选择连接', trigger: 'change' }],
  path: [{ required: true, message: '请输入请求路径', trigger: 'blur' }],
  schema: [{ required: true, message: '请选择工作表', trigger: 'change' }]
}
const formRef = ref()
const manageForm = ref({
  tags: [],
  security: '公开',
  project: '公共项目',
  department: '根机构',
  owner: '张三',
  developer: '某某公司'
})
const newTag = ref('')
function addTag() {
  if (newTag.value && !manageForm.value.tags.includes(newTag.value)) {
    manageForm.value.tags.push(newTag.value)
    newTag.value = ''
  }
}
const connOptions = computed(() =>
  form.value.dsType ? ['新建-Excel', 'Excel-商品列表', 'Excel-订单列表'] : []
)
const adminRows = [
  { leftLabel: '状态', leftValue: '', rightLabel: '项目', rightValue: '' },
  { leftLabel: '负责人', leftValue: '', rightLabel: '业务部门', rightValue: '' },
  { leftLabel: '创建时间', leftValue: '', rightLabel: '创建人', rightValue: '' },
  { leftLabel: '更新时间', leftValue: '', rightLabel: '更新人', rightValue: '' },
  { leftLabel: '部署时间', leftValue: '', rightLabel: '部署人', rightValue: '-' },
  { leftLabel: '卸载时间', leftValue: '', rightLabel: '卸载人', rightValue: '-' },
  { leftLabel: '描述', leftValue: '-', rightLabel: '', rightValue: '' },
]
const helpHtml = `
  <h3>一、概述</h3>
  <p>数据服务是数据驱动时代的核心基础设施。它通过将数据资源化、服务化、产品化，极大地降低了数据使用的门槛，释放了数据的潜在价值，是企业和组织实现数字化转型和智能化升级的关键支撑。数据服务是指将数据库的功能、SOAP服务和SAP服务进行标准化的接口和协议暴露出来，使得其他系统或应用可以通过网络调用这些接口来访问和使用数据库资源。数据服务包括数据库服务、soap服务和sap系统集成服务，下面我就从这三个功能依次介绍。</p>
  <h3>二、功能介绍</h3>
  <h4>（一）数据库</h4>
  <p>数据库服务化是指将数据库的功能和服务通过标准的接口和协议暴露出来，使得其他系统或应用可以通过网络调用这些接口来访问和使用数据库资源。</p>
  <b>核心层面：</b>
  <ul>
    <li>数据集成/传递</li>
    <li>服务管理功能</li>
    <li>安全控制</li>
  </ul>
  <b>功能：</b>
  <ul>
    <li>创建数据库连接服务</li>
    <li>服务配置</li>
    <li>服务操作</li>
    <li>执行结果</li>
  </ul>
  <b>使用样例：</b>
  <ol>
    <li>创建数据库连接<br>创建数据库服务需要首先配置数据库连接，以实现数据源及数据库类型信息。</li>
    <li>登录采集工具</li>
    <li><b>在左侧资源管理器下的数据连接或者在快速访问下的数据连接中新增</b></li>
  </ol>
`;
const fields = ref([
  { name: 'Sheet1.姓名', type: 'VARCHAR', comment: '', agg: '', returnName: '' },
  { name: 'Sheet1.年龄', type: 'Integer', comment: '', agg: '', returnName: '' },
  { name: 'Sheet1.出生日期', type: 'VARCHAR', comment: '', agg: '', returnName: '' },
  { name: 'Sheet1.身高', type: 'Double', comment: '', agg: '', returnName: '' },
  { name: 'Sheet1.成绩', type: 'Double', comment: '', agg: '', returnName: '' }
])
const collapseActive = ref(['result'])
const resultTab = ref('sql')
const sqlPreview = computed(() => {
  const cols = fields.value.map(f => '`' + f.name + '`').join(',')
  let sql = `SELECT ${cols} FROM Sheet1`
  
  // 添加过滤条件
  const validConditions = conditions.value.filter(c => c.field && c.op && c.param)
  if (validConditions.length > 0) {
    sql += ' WHERE '
    const conditionsStr = validConditions.map(c => {
      let condition = ''
      if (c.preLink && c.preLink !== '无') {
        condition += c.preLink + ' '
      }
      condition += `\`${c.field}\` ${c.op} '${c.param}'`
      if (c.postLink && c.postLink !== '无') {
        condition += ' ' + c.postLink
      }
      return condition
    }).join(' ')
    sql += conditionsStr
  }
  
  // 添加排序条件
  const validSorts = sortConditions.value.filter(s => s.field && s.method)
  if (validSorts.length > 0) {
    sql += ' ORDER BY '
    const sortStr = validSorts.map(s => `\`${s.field}\` ${s.method}`).join(', ')
    sql += sortStr
  }
  
  return sql
})
function moveFieldUp(idx) {
  if (idx > 0) {
    const arr = fields.value
    const t = arr[idx]; arr[idx] = arr[idx-1]; arr[idx-1] = t
  }
}
function moveFieldDown(idx) {
  if (idx < fields.value.length - 1) {
    const arr = fields.value
    const t = arr[idx]; arr[idx] = arr[idx+1]; arr[idx+1] = t
  }
}
function removeField(idx) {
  fields.value.splice(idx, 1)
}
const fieldsSubTab = ref('select-fields')
const conditionSubTab = ref('filter')
const conditions = ref([
  { preLink: '无', field: '', type: '', comment: '', op: '', param: '', postLink: '无' }
])
function updateFieldType(index) {
  const field = conditions.value[index].field;
  const fieldType = fields.value.find(f => f.name === field)?.type;
  if (fieldType) {
    conditions.value[index].type = fieldType;
  } else {
    conditions.value[index].type = '';
  }
}
function moveConditionUp(idx) {
  if (idx > 0) {
    const arr = conditions.value
    const t = arr[idx]; arr[idx] = arr[idx-1]; arr[idx-1] = t
  }
}
function moveConditionDown(idx) {
  if (idx < conditions.value.length - 1) {
    const arr = conditions.value
    const t = arr[idx]; arr[idx] = arr[idx+1]; arr[idx+1] = t
  }
}
function removeCondition(idx) {
  conditions.value.splice(idx, 1)
}
function addCondition(idx) {
  const newRow = { preLink: '无', field: '', type: '', comment: '', op: '', param: '', postLink: '无' }
  if (typeof idx === 'number') {
    conditions.value.splice(idx + 1, 0, newRow)
  } else {
    conditions.value.push(newRow)
  }
}
const sortConditions = ref([
  { sequence: 1, field: 'Sheet1.姓名', method: 'ASC' },
  { sequence: 2, field: 'Sheet1.年龄', method: 'DESC' }
])
function moveSortUp(idx) {
  if (idx > 0) {
    const arr = sortConditions.value
    const t = arr[idx]; arr[idx] = arr[idx-1]; arr[idx-1] = t
  }
}
function moveSortDown(idx) {
  if (idx < sortConditions.value.length - 1) {
    const arr = sortConditions.value
    const t = arr[idx]; arr[idx] = arr[idx+1]; arr[idx+1] = t
  }
}
function removeSort(idx) {
  sortConditions.value.splice(idx, 1)
}
function addSort() {
  const newRow = { sequence: sortConditions.value.length + 1, field: '', method: 'ASC' }
  sortConditions.value.push(newRow)
}
// 监听操作类型变化，自动切换选项卡
watch(() => form.opType, (newVal) => {
  if (newVal === '统计数量') {
    fieldsSubTab.value = 'condition-config'
  } else {
    fieldsSubTab.value = 'select-fields'
  }
})
const paginationForm = ref({
  enablePagination: false,
  pageParamName: 'page',
  pageSizeParamName: 'pageSize'
})
const versionFilter = ref({ type: 'version', version: '', deployer: '', deployTime: [] })
const versionOptions = ref(['V1.0'])
const textdocVersionTableData = ref([
  {
    name: '数据服务化-EXCEL-学生信息表',
    versionNumber: 'V1.0',
    operationalStatus: '草稿',
    creator: 'chenyl',
    createTime: '2025-07-25 16:24:46',
    deployer: '-',
    deployTime: '-',
  }
])
</script>

<style scoped>
.form-card,
.group-card,
.fields-card,
.help-card {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.textdoc-form-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0;
  background: #fafbfc;
}
.form-card {
  width: 900px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  background: #fff;
  padding: 24px 32px 16px 32px;
}
.form-title {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  margin-bottom: 18px;
  border-left: 3px solid #e4e7ed;
  padding-left: 12px;
}
.textdoc-form {
  margin-top: 8px;
}
.el-form-item {
  margin-bottom: 18px;
}
.el-form-item__label {
  font-size: 14px;
}
.el-input, .el-select {
  width: 100%;
}
.main-tab {
  margin-bottom: 0;
}
.sub-tab {
  margin-top: 16px;
}
.group-card {
  position: relative;
  border-radius: 8px;
  margin-top: 18px;
  margin-bottom: 16px;
  background: #fcfcfd;
  padding-top: 24px;
  overflow: visible;
}
.group-title-abs {
  position: absolute;
  top: -14px;
  left: 24px;
  background: #fcfcfd;
  color: #409EFF;
  font-size: 15px;
  font-weight: 500;
  padding: 0 16px;
  height: 28px;
  line-height: 28px;
  border-radius: 8px 8px 8px 0;
  border-left: 1px solid #e4e7ed;
  border-top: 1px solid #e4e7ed;
  z-index: 2;
}
.readonly-disabled-input .el-input__wrapper,
.readonly-disabled-input input[readonly] {
  background: #f5f6fa !important;
  color: #888 !important;
  cursor: not-allowed;
}
.tag-span {
  display: inline-block;
  background: #f0f4fa;
  color: #409EFF;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 13px;
}
.main-tab :deep(.el-tabs__item),
.sub-tab :deep(.el-tabs__item) {
  font-size: 14px !important;
  font-weight: normal !important;
}
.version-tag {
  margin: 8px 0 16px 8px;
  font-size: 14px;
  border-radius: 6px;
  padding: 2px 16px;
  background: #f4f8ff;
  color: #409EFF;
  border: 1px solid #d0e4ff;
}
.admin-table {
  background: #f8f9fb;
  border-radius: 4px;
  margin: 0 8px 8px 8px;
  padding: 0;
  box-shadow: none;
}
.admin-table-row {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  min-height: 40px;
  align-items: center;
}
.admin-table-row:last-child {
  border-bottom: none;
}
.admin-table-cell {
  flex: 0 0 120px;
  padding: 8px 12px;
  font-size: 14px;
  color: #666;
  background: #f8f9fb;
  border-right: none;
}
.left {
  font-weight: normal;
  background: #f4f6fa;
  color: #666;
  width: 120px;
}
.left-value {
  flex: 1;
  background: #fff;
  color: #333;
}
.right {
  font-weight: normal;
  background: #f4f6fa;
  color: #666;
  width: 120px;
}
.right-value {
  flex: 1;
  background: #fff;
  color: #333;
}
.help-card {
  max-height: 600px;
  overflow: auto;
  padding: 0 0 16px 0;
}
.help-content-scroll {
  padding: 24px 32px 16px 32px;
}
.help-richtext {
  font-size: 15px;
  color: #222;
  line-height: 1.8;
  margin-bottom: 24px;
}
.help-richtext h3 {
  font-size: 17px;
  font-weight: bold;
  margin: 18px 0 8px 0;
}
.help-richtext h4 {
  font-size: 15px;
  font-weight: bold;
  margin: 14px 0 6px 0;
}
.help-richtext ul, .help-richtext ol {
  margin: 8px 0 8px 24px;
}
.help-richtext li {
  margin-bottom: 4px;
}
.help-richtext b {
  font-weight: bold;
  margin-right: 6px;
}
.help-img {
  width: 100%;
  max-width: 1200px;
  border-radius: 4px;
  margin-top: 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
}
.fields-card {
  padding: 0 0 16px 0;
}
.fields-tip {
  color: #888;
  font-size: 13px;
  margin: 8px 0 12px 8px;
}
.fields-table {
  background: #fafbfc;
  border-radius: 4px;
  font-size: 14px;
  --el-table-border-color: #f0f0f0;
  --el-table-header-bg-color: #f8f9fb;
  --el-table-row-hover-bg-color: #f4f8fa;
  --el-table-header-font-weight: normal;
}
.fields-table :deep(.el-table__header th) {
  font-size: 14px;
  font-weight: normal;
  background: #f8f9fb;
  color: #666;
}
.fields-table :deep(.el-table__cell),
.fields-table :deep(td) {
  text-align: center;
  vertical-align: middle;
}
.fields-table :deep(.el-table__body tr) {
  background: #fff;
}
.fields-table :deep(.el-table__body td) {
  border-right: none !important;
}
.fields-table :deep(.el-table__row) {
  transition: background 0.2s;
}
.fields-table :deep(.el-table__row:hover) {
  background: #f4f8fa !important;
}
.fields-collapse {
  background: #fff;
  border-radius: 4px;
  margin: 0 8px;
}
.sql-preview {
  background: #f8f9fb;
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14px;
  color: #222;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  margin: 0;
  white-space: pre-wrap;
}
.result-placeholder {
  color: #aaa;
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}
.fields-topbar {
  background: #2c3e50;
  color: #fff;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  margin-bottom: 0;
}
.fields-topbar-btn {
  color: #fff !important;
  font-size: 15px;
  margin-right: 16px;
  font-weight: normal;
}
.fields-topbar-btn :deep(.el-icon) {
  color: #fff !important;
  margin-right: 4px;
}
.fields-subtab {
  margin-bottom: 0;
}
.condition-table {
  margin-top: 0;
}
.condition-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.op-btn {
  height: 28px;
  line-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.op-btn:not(:last-child) {
  margin-right: 6px;
}
.sort-table {
  background: #fafbfc;
  border-radius: 4px;
  font-size: 14px;
  --el-table-border-color: #f0f0f0;
  --el-table-header-bg-color: #f8f9fb;
  --el-table-row-hover-bg-color: #f4f8fa;
  --el-table-header-font-weight: normal;
}
.sort-table :deep(.el-table__header th) {
  font-size: 14px;
  font-weight: normal;
  background: #f8f9fb;
  color: #666;
}
.sort-table :deep(.el-table__cell),
.sort-table :deep(td) {
  text-align: center;
  vertical-align: middle;
}
.sort-table :deep(.el-table__body tr) {
  background: #fff;
}
.sort-table :deep(.el-table__body td) {
  border-right: none !important;
}
.sort-table :deep(.el-table__row) {
  transition: background 0.2s;
}
.sort-table :deep(.el-table__row:hover) {
  background: #f4f8fa !important;
}
.pagination-form {
  margin-top: 16px;
}
.version-toolbar {
  background: #f7f9fa;
  padding: 12px 12px 8px 12px;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}
.version-table {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
.version-table .el-table__header th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}
.version-table .el-table__body td {
  padding: 12px 0;
}
.version-table .el-link {
  font-size: 14px;
}
.version-table .el-tag {
  border-radius: 2px;
}
</style> 